<template>
  <!-- 头部部分 -->
  <header class="header">
    <h1>todos</h1>
    <!-- 5:做添加功能 利用键盘抬起就添加内容，但自己改不了数据，向父组件发起申请
    在这之前要给v-model 拿到输入的name内容-->
    <input
      v-model="name"
      @keyup.enter="add"
      @keyup.esc="name = ''"
      class="new-todo"
      placeholder="请输入任务名称"
      autofocus
    />
  </header>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      // name的初始值是‘’
      name: "",
    };
  },
  methods: {
    add() {
      // 5：判断是否输入的是空值
      if(this.name==='')return alert('不能输入为空')
      // console.log(this.name);
      this.$emit("add-event", this.name);
      // 输入完内容，让name为空 方便下次输入
      this.name = ''
    },
  },
};
</script>

<style></style>
